<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>用户昵称</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body class="bg_ff">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">用户昵称</h1>
		</header>
		<div class="mui-content bg_ff padding_12">
		    <div class="liet_nav">
		    	<a href="javascript:void(0);" class="active">粉丝 </a>
		    	<a href="javascript:void(0);">关注 </a>
		    	<a href="javascript:void(0);">推荐关注</a>
		    </div>
		    <div class="mg_top20" id="list">
		    	 <!--<div class="fan_list">
			    	<div class="fan_item">
			    		<p class="color_00"><img src="images/index_head.png"/>花儿乐队</p>
			    	</div>
			    	<a href="javascript:void(0);" class="heart small_btn">关注</a>
			    </div>-->
			   
		    </div>
		   
		</div>
		    
		 <!--<img src='占位图' class='HUI_Lazy' lazySrc='图片的实际地址' />-->
		 

		
		<script src="js/mui.js"></script>
		<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			$('.liet_nav').on('click','a',function(){
				var index = $(this).index()
				$('#list').html('')
				$(this).addClass('active').siblings().removeClass('active')
				if(index==0){
					List(1,'userCenter/otherUserFansList')
				}else if(index==1){
					List(1,'userCenter/otherUserFocusList')
				}else if(index==2){
					List(1,'userCenter/recommendFocus')
				}
			})
			//粉丝关注
			function List(current,url){
				$('.gif').show()
				$.ajax({
					type:"post",
					url:urlcom + url,
					async:true,
					dataType:'json',
					data:{
						userId:localStorage.getItem('userId'),
						otherUserId:getUrlParam('id')||localStorage.getItem('userId'),
						current:current,
						size:10
					},
					success:function(res){
						$('.gif').hide()
						if(res.code==0){
							var html=''
							if(res.data.length){
								$.each(res.data, function(k,v) {
									html+='<div class="fan_list">'+
							    	'<div class="fan_item">'+
							    		'<p class="color_00"><img src="'+v.headImg+'"/>'+v.name+'</p>'+
							    	'</div>'
							    	if(v.isFocus==1){
							    		html+='<a href="javascript:void(0);" class="heart small_btn bg_e" onclick="fouce(this,2,'+v.focusUserId+')">已关注</a>'
							    	}else if(v.isFocus==2){
							    		html+='<a href="javascript:void(0);" class="heart small_btn " onclick="fouce(this,1,'+v.focusUserId+')">关注</a>'
							    	}
							   html+= '</div>'
								});
								$('#list').html(html)
							}else{
								$('#list').html('<p class="padding_10 text-center"> 暂无数据</p>')
							}
						}else{
							msg(res.msg)
						}
		 			}
			     })
			}List(1,'userCenter/otherUserFansList')
			
			
			//关注 取消关注
			function fouce(obj,type,id){
				$.ajax({
					type:"post",
					url:urlcom + "userCenter/focusUser",
					async:true,
					dataType:'json',
					data:{
						userId:localStorage.getItem('userId'),
						focusUserId:id,
						type:type
					},
					success:function(res){
						if(res.code==0){
							var that = obj
							if(type==1){
								$(that).html('已关注')
								$(that).addClass('bg_e')
							}else if(type==2){
								$(that).html('关注')
								$(that).removeClass('bg_e')
							}
							msg('操作成功')
							console.log(type)
							
							
						}else{
							msg(res.msg)
						}
		 			}
			     })
			}
		</script>
		
	</body>

</html>
